<template>
  <div class="comment">
    <h4>评论（{{commentTotal}}）</h4>
    <div>
      <img :src="myuser.user_img" v-if="myuser" alt="">
      <img src="@/assets/noface.jpg" v-else alt="">
      <input ref="commentIpt" v-model="commentContent" type="text" placeholder="说点什么吧">
      <button @click="commentPublish">发表</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['commentTotal'],
  data () {
    return {
      myuser: null,
      commentContent: ''
    }
  },
  created () {
    if (localStorage.getItem('token')) {
      this.getUserInfo()
    }
  },
  methods: {
    // 获取用户信息
    async getUserInfo () {
      const res = await this.$http.get('/user/' + localStorage.getItem('id'))
      // console.log(res)
      if (res.status !== 200) return this.$msg.fail('获取用户信息失败')
      this.myuser = res.data[0]
    },
    // 点击发表按钮 发表评论
    commentPublish () {
      if (!this.myuser || !localStorage.getItem('token') || !localStorage.getItem('id')) {
        return this.$msg.fail('请先登录')
      }
      // 向父组件发送评论内容
      this.$emit('publishComment', this.commentContent)
      // 清空评论输入框
      this.commentContent = ''
    },
    focusIpt () {
      this.$refs.commentIpt.focus()
    }
  }
}
</script>

<style lang="less" scoped>
.comment {
  padding: 10px 10px;
  h4 {
    font-size: 15px;
    font-weight: 700;
    color: #212121;
  }
  div {
    display: flex;
    margin-top: 10px;
    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
    }
    input {
      outline: none;
      border: 0;
      font-size: 13px;
      padding-left: 15px;
      background-color: #ccc;
      border-radius: 12px;
      margin: 0 10px;
      border-radius: 12px;
    }
    button {
      outline: none;
      border: 0;
      font-size: 13px;
      background-color: #fb7299;
      color: white;
      border-radius: 12px;
      padding: 0 15px;
    }
  }
}
</style>
